<template>
	<view class="page-box">
		<view class="pad-30">
			<view class="bg-white radius24 pad-left-right-30 pad-top-30">
				<view class="centerXY">
					<image class="avatar" src="@/static/image/icon10.png"></image>
				</view>
				<up-cell-group :border="false">
					<!-- <up-cell :titleStyle="titleStyle" :border="false" title="昵称" isLink
						url="/pages/my_actions/coupon/coupon">
						<template #value>
							<view class="centerXY">
								<view class="multi1 font-28  mar-right-10">小西瓜momo</view>
							</view>
						</template>
					</up-cell> -->
					<up-cell :titleStyle="titleStyle" title="手机号" :value="userInfo.tel"></up-cell>
					<!-- <up-cell :titleStyle="titleStyle" :border="false" title="实名信息" isLink value="未实名，去认证"></up-cell> -->
					<up-cell @click="hanldeAddress" :titleStyle="titleStyle" title="常用地址" isLink value="管理"></up-cell>
					<up-cell @click="hanldeEditPassword" :titleStyle="titleStyle" :border="false" title="登录密码" isLink
						value="修改"></up-cell>
				</up-cell-group>
			</view>

			<my-popup content="您确定退出吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
			<up-button textSize="10rpx" @click="hanldeSignout"
				:customStyle="{color: '#0055FE',width:'500rpx',height:'96rpx',borderRadius:'50rpx',border: '2rpx solid #0055FE',marginTop: '300rpx' }"
				class="button" color="#0055FE" type="primary" :plain="true" :hairline="true" text="退出登录">
				<view class="flex align-center">
					<image class="exit-icon" src="/static/image/signOut.png" mode=""></image>
					<text class="mar-left-10">退出登录</text>
				</view>
			</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'

	import {
		getBaseInfo
	} from '@/api/index.js'

	const titleStyle = ref({
		color: '#7a7a7a',
		padding: '10rpx 0'
	})

	// 退出登录
	const isPopup = ref(false);
	const hanldeSignout = () => {
		isPopup.value = true;
	}

	// 确认退出
	const hanldeConfirm = () => {
		uni.removeStorageSync('jwt_token');
		uni.removeStorageSync('refresh_token');
		uni.reLaunch({
			url: '/pages/login/login'
		})
	}

	// 获取个人信息
	const userInfo = ref({});
	const getUserInfo = () => {
		getBaseInfo().then(res => {
			userInfo.value = res.data.info;
		})
	}

	// 修改Miami
	const hanldeEditPassword = () => {
		uni.navigateTo({
			url: '/pages/my_actions/editPassword/editPassword'
		})
	}

	onShow(() => {
		getUserInfo();
	})

	// 跳转地址列表
	const hanldeAddress = () => {
		uni.navigateTo({
			url: '/pages/address/list'
		})
	}
</script>

<style lang="scss" scoped>
	.avatar {
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
	
	.exit-icon{
		width: 26rpx;
		height: 26rpx;
	}

	.u-slot-value {
		width: 400rpx;
	}

	.copy {
		display: block;
		width: 40rpx;
		height: 40rpx;
	}

	.button> ::v-deep .u-button__text {
		font-size: 32rpx !important;
	}

	.content {
		height: 200rpx
	}
</style>